<template>
  <div>
    <div class="danweiguanlis">
      <div class="wrap3 flex-col">
        <div v-show="isshow">
          <div class="header">
            <div class="group4 flex-col" @click="add">
              <span class="txt2">新增新闻类别</span>
            </div>
          </div>
          <div class="group5 flex-col">
             <el-table
            :data="AllnewstypesEmpty"
            tooltip-effect="dark"
            style="width: 100%"
            row-key
          >
            <el-table-column prop="nNewsType" label="新闻类别" show-overflow-tooltip></el-table-column>
            <el-table-column prop="nState" label="状态" show-overflow-tooltip>
              <template scope="scope">
                <span v-if="scope.row.nState===1">启用</span>
                <span v-if="scope.row.nState===0">禁用</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" show-overflow-tooltip>
              <template slot-scope="scope">
                <a @click="editor(scope.row)" href="javascript:;">编辑</a>
                <span>|</span>
                <a href="#" @click.prevent="dialogVisible=true">删除</a>
                <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
          <span>此操作将永久删除该文件, 是否继续?</span>
          <span slot="footer" class="dialog-footer">
            <button class="button1" @click="dialogVisible = false">取 消</button>
            <button class="button2" type="primary" @click="postDeleteLetter(scope.row)">确 定</button>
          </span>
        </el-dialog>
              </template>
            </el-table-column>
          </el-table>
          </div>
        </div>
        <!-- 返回 -->
        <div v-show="ishowfan">
          <div class="groups4 flex-col" @click="addf">
            <span class="txt2">返回</span>
          </div>
          <div class="fanhui">
            <!-- 表单 -->
            <div class="biaodan">
              <div>
                <label for>新闻类别</label>
                <input id="id1" type="text" v-model="nNewsType" />
              </div>
              <div>
                <label for>状态</label>
                <select class="tai" v-model="nState">
                  <option value="1">启用</option>
                  <option value="0">禁用</option>
                </select>
              </div>
              <button @click="Updatenewstype" class="queding">确定</button>
            </div>
          </div>
        </div>
        <!-- 添加 -->
        <div v-show="istianjai">
          <div class="groups4 flex-col" @click="addf">
            <span class="txt2">返回</span>
          </div>
          <div class="fanhui">
            <!-- 表单 -->
            <div class="biaodan">
              <div>
                <label for>类别名称</label>
                <input id="id1" type="text" v-model="name" />
              </div>
              <div>
                <label for>状态</label>
                <select class="tai" v-model="zhuang">
                  <option value="1">启用</option>
                  <option value="0">禁用</option>
                </select>
              </div>
              <button @click="Addnewstype" class="queding">确定</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {

     dialogVisible:false,
ename:'',
ezhuang:'',
      id: '',
      name: '',
      ctime: '',
      zhuang: '',
      // 修改暂存数据
      newlist: [{
        id: '',
        name: '',
        ctime: '',
        zhuang: ''
      }],
      item:{
  nTid:'',
  nNewsType:'',
  nState:''
      },
      nNewsType:'',
      keywords: '',
      searchOps: '',
      value: '',
      input: '',
      isshow: true,
      ishowfan: false,
      istianjai: false,
      labelPosition: 'right',
      AllnewstypesEmpty: [],//获取所有新闻类别内容
      AddnewstypeEmpty: [],//新增新闻类别
      UpdatenewstypeEmpty:[],
      DeletenewstypeEmpty:[],
      nTid: '',
      nState: '',
    }
  },
  created () {
    this.Allnewstypes()
  },
  methods: {
    //新增新闻类别
    async Addnewstype () {
        this.isshow = true
      this.istianjai = false
      this.ishowfan = false
      let formDate = new FormData()
      //新增只需要拿  类别名称 和 状态 两个模块
      formDate.append('nNewsType', this.name)
      formDate.append('nState', this.zhuang)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/newstype/Post_Updatenewstype', formDate, config)
      this.AddnewstypeEmpty = res
      console.log(res);
            // this.$router.go(0)
            this.Allnewstypes()
             this.$message({
          message: '添加成功',
          type: 'success'
        });
        this.name=''
        this.zhuang=''
    },
    // 编辑新闻类别
     async Updatenewstype () {
      this.isshow = true
      this.istianjai = false
      this.ishowfan = false
      let formDate = new FormData()
      formDate.append('nTid',this.nTid)
      formDate.append('nNewsType', this.nNewsType)
      formDate.append('nState', this.nState)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/newstype/Post_Updatenewstype', formDate, config)
      this.UpdatenewstypeEmpty = res
      console.log(res);
      // this.$router.go(0)
      this.Allnewstypes()
       this.$message({
          message: '修改成功',
          type: 'success'
        });
        this.name=''
        this.zhuang=''
    },

// 删除新闻类别
async PostDeletnewstypes(row){
  this.dialogVisible=false
console.log(row)
this.nTid=row.nTid
 let formDate = new FormData()
      formDate.append('nTid',this.nTid)
       const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/newstype/Post_Deletenewstype', formDate, config)
      this.DeletenewstypeEmpty = res
      console.log(res);
      // this.$router.go(0)
       this.Allnewstypes()

},
    //获取所有新闻类别内容
    async Allnewstypes () {
      const { data: res } = await this.$http.get('/api/newstype/Get_Allnewstypes')
      this.AllnewstypesEmpty = res
      console.log(res);
    },
    search (keywords) {
      let newList = this.list.filter(item => {
        if (item.name.includes(keywords)) {
          return item
        }
      })
      return newList
    },
    searchOp (searchOps) {
      let Lists = this.list.filter(item => {
        if (item.zhuang.includes(searchOps)) {
          return item
        }
      })
      return Lists
    },
    add () {

      this.isshow = false
      this.ishowfan = false
      this.istianjai = true
    },
    addf () {
      this.isshow = true
      this.ishowfan = false
      this.istianjai = false
    },
    queding () {
      if (!this.name || !this.ctime || !this.zhuang) {
        alert("内容不能为空");
        return
      }
      let car = { name: this.name, ctime: this.ctime, zhuang: this.zhuang }
      this.list.push(car)
      this.name = ''
      this.ctime = ''
      this.zhuang = ''
      this.isshow = true
      this.istianjai = false
      this.ishowfan = false
    },
    set (nTid) {
      this.isshow = false
      this.ishowfan = true
      this.istianjai = false
      this.nTid = nTid
    },
    editor(row){
      this.isshow = false
      this.ishowfan = true
      this.istianjai = false
      console.log(row)
      this.nTid=row.nTid
      this.nNewsType=row.nNewsType
      this.nState=row.nState
    }
  }
};
</script>
<style scoped lang="css" src="./assets/index.css" />
